<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card layui-hide">
  <div class="layui-card-body">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-form-item layui-inline">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-inline">
            <input type="text" name="title" placeholder="" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-inline">
          <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
            <i class="layui-icon layui-icon-search"></i>查询
          </button>
          <button type="reset" class="pear-btn pear-btn-md">
            <i class="layui-icon layui-icon-refresh"></i>重置
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table id="data-table" lay-filter="data-table-filter"></table>
  </div>
</div>

<script type="text/html" id="toolbarLeftTpl">
  <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
    <i class="layui-icon layui-icon-add-1"></i>新增
  </button>
  <button class="pear-btn pear-btn-danger pear-btn-md layui-hide" lay-event="batchDelete">
    <i class="layui-icon layui-icon-delete"></i>删除
  </button>
</script>
<script type="text/html" id="operationTpl">
  <button class="pear-btn pear-btn-primary pear-btn-xs layui-hide" lay-event="detail" title="详情"><i class="layui-icon layui-icon-eye"></i></button>
  <button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
  <button class="pear-btn pear-btn-danger pear-btn-xs" lay-event="delete" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['treeTable', 'form', 'jquery','layer', 'admin', 'dict', 'util'], function() {
        let treeTable = layui.treeTable;
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let admin = layui.admin;
        let dict = layui.dict;
        let util = layui.util;

        util.fixbar();

        let cols = [[
            { type: 'checkbox', hide: true },
            { field: 'id', title: 'ID', width: 200, hide: true },
            { field: 'parentId', title: 'PARENT_ID', width: 200, hide: true },
            { field: 'title', title: '菜单名称', width: 200 },
            { field: 'type', title: '菜单类型', width: 90, align: 'center', templet: function(d){
                return dict.label('vtl_menu_type', d.type, true);
            }},
            { field: 'icon', title: '图标', width: 40, align: 'center', templet: function (d) {
                return '<i class="' + d.icon + '"></i>';
            }},
            { field: 'permission', title: '权限编码', width: 200 },
            { field: 'disabled', title: '菜单状态', minWidth: 100, align: 'center', event: 'disabled', templet: function(d){
                if(d.type == 'DIR' || d.type == 'MENU') {
                    return dict.labelButton('vtl_disabled', d.disabled, true);
                } else {
                    return '';
                }
            }},
            { field: 'seq', title: '排序号', width: 80 },
            { field: 'openType', title: '打开类型', width: 120, templet: function(d) {
                return d.type == 'MENU' ? dict.label('vtl_menu_open_type', d.openType, true) : '';
            } },
            { field: 'url', title: '页面链接' },
            { field: 'remark', title: '备注', width: 120, hide: true },
            { field: 'createByName', title: '创建者', width: 120, hide: true },
            { field: 'createTime', title: '创建时间', width: 160, hide: true, templet: function (d) {
                return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
            }},
            { field: 'updateByName', title: '更新者', width: 120, hide: true },
            { field: 'updateTime', title: '更新时间', width: 160, hide: true, templet: function (d) {
                return layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss");
            }},
            { field: 'operation', title: '操作', width: 160, fixed: 'right', templet: '#operationTpl' }
        ]]

        treeTable.render({
            elem: '#data-table',
            url: '/vtl-menu/treeTableDataList',
            parseData: function(res) {
                return {
                    "code": 0,
                    "msg": 'SUCCESS',
                    "count": res.length,
                    "data": res
                };
            },
            tree: {
              customName: {
                children: 'children',
                isParent: 'isParent',
                name: 'title',
                id: 'id',
                pid: 'parentId',
                icon: 'treeDataIcon',
              },
              data: { isSimpleData: true, rootPid: '0' },
            },
            cols: cols,
            skin: 'line',
            toolbar: '#toolbarLeftTpl',
            defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports']
          });

          treeTable.on('toolbar(data-table-filter)', function(obj) {
              if (obj.event === 'add') {
                  window.edit();
              } else if (obj.event === 'batchDelete') {
                  window.batchDelete();
              } else if (obj.event === 'refresh') {
                  window.refresh(true);
              }
          });

          treeTable.on('tool(data-table-filter)', function(obj) {
              let row = obj.data;
              switch (obj.event) {
                  case 'detail':
                      window.detail(row.id);
                      break;
                  case 'edit':
                      window.edit(row.id);
                      break;
                  case 'delete':
                      window.delete(obj);
                      break;
                  case 'disabled':
                      window.setDisabledValue(obj);
                      break;
                  default:
                      break;
              }
          });

          form.on('submit(data-table-query-filter)', function(data) {
              window.refresh(data.field);
              return false;
          });

          window.refresh = function(field = {}, deep = false) {
              $.vtl.tableReloadData('data-table', field, deep);
          }

          window.edit = function(id) {
              let url = 'edit.html' + ($.vtl.isBlank(id) ? '' : ('?id=' + id));
              $.vtl.openLayer(url, { title: '编辑', area: ['900px', '90%'] });
          }

          window.delete = function(obj) {
              layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
                  layer.close(index);
                  $.delete('/vtl-menu/' + obj.data.id, function(result) {
                      if (result.code == 200) {
                          obj.del();
                      }
                  });
              });
          }

          window.detail = function(id, title = '详情') {
              top.layui.admin.jump('vtl-menu-' + id, title, 'views/vtl-menu/detail.html?&id=' + id)
          }

          window.setDisabledValue = function(obj) {
              if(obj.data.type == 'DIR' || obj.data.type == 'MENU') {
                  layer.confirm('确定切换【启用/停用】状态？', { icon: 3, title: '提示' }, function(index) {
                      layer.close(index);
                      $.post('/vtl-menu/setDisabledValue/' + obj.data.id, { disabled: !obj.data.disabled }, function(result) {
                          if (result.code == 200) {
                             window.refresh(true);
                          }
                      });
                  });
              }
          }
    })
</script>
</body>
</html>
